<template>
  <div class="zh-person-index">
    <div class="zh_card_form"  @click="show = true">
      <span class="name">头像</span>
      <div class="value">
        <span class="numberId photo" :style="{'background-image': 'url(' + photo + ')'}"></span>
        <i class="iconfont icon-left"></i>
      </div>
    </div>
     <div class="zh_card_form" v-for="item in myIconList" :key="item.index" @click="goUpdateName(item.index,item.value)">
      <span class="name">{{ item.key }}</span>
      <div class="value" >
        <span class="numberId">{{ item.value }}</span>
        <i class="iconfont icon-left"></i>
      </div>
    </div>
     <!-- <div class="zh_card_form" >
      <span class="name">昵称</span>
      <div class="value" @click="goUpdateName('nickName',nickName)">
        <span class="numberId">{{ nickName }}</span>
        <i class="iconfont icon-left"></i>
      </div>
    </div>
    <div class="zh_card_form" >
      <span class="name">实名认证</span>
      <div class="value" @click="goUpdateName('autoNym',autoNym)">
        <span class="numberId">{{ autoNym }}</span>
        <i class="iconfont icon-left"></i>
      </div>
    </div> -->

    <van-popup v-model="show" position="bottom" round  >
      <div class="zh-popup-cell" v-for="item in 3" :key="item" >
        拍照{{ item }}
        <input class="upload-input" @change="upload" name="file" type="file" accept="image/*"/>
      </div>
      <div class="zh-eee" style="background:#f7f8fa;height:10px"></div>
      <div class="zh-popup-cell" @click="show = false">取消</div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      myIconList: [
        { key: '个性签名', value: this.$store.state.sign, index: 'sign' },
        { key: '昵称', value: this.$store.state.nickName, index: 'nickName' },
        { key: '实名认证', value: this.$store.state.autoNym, index: 'autoNym' },
        { key: '手机号码', value: this.$store.state.phone, index: 'phone' }
      ],
      photo: localStorage.getItem('txImage') || require('@/assets/image/photo.jpg'),
      show: false,
      title: {
        nickName: '昵称',
        sign: '个性签名',
        autoNym: '实名认证',
        phone: '手机号码'
      }
    }
  },
  computed: {
    ...mapState({
      sign: 'sign', // 签名
      nickName: 'nickName', // 昵称
      autoNym: 'autoNym' // 实名
    })
  },
  created () {
    // this.$store.commit('updateSign', '咋见之欢, 不如久处不厌')
  },
  methods: {
    goUpdateName (type, value) {
      this.$router.push({
        name: 'update',
        query: { type, value },
        params: { title: this.title[type] }
      })
    },
    upload (e) {
      this.show = false
      const file = e.target.files[0]
      if (file.size / 1024 / 1024 > 2) {
        this.$toast({
          message: '图片不能大于2M',
          className: 'serviceportal-toast'
        })
        return false
      }
      const re = new FileReader()
      re.readAsDataURL(file)
      re.onload = function (re) {
        this.addedPreviewFile = re.result
      }
      setTimeout(() => {
        this.photo = re.result
        localStorage.setItem('txImage', re.result)
      }, 100)
    }
  }
}
</script>

<style lang="less" scoped>
.zh-person-index {
  // height: 690px;
  background: #fff;
  // margin-top: 10px;
  padding: 0px 15px;
  .zh_card_form {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 16px;
   height: 48px;
   line-height: 48px;
   border-bottom: 1px solid #eee;
   .name {
     color: #AAAAAA;
   }
   .value {
     color: #333;
     display: flex;
     align-items: center;
     font-size: 14px;
     .numberId {
       margin-right: 5px;
     }
   }

 }
}
</style>
